.menus {
  text-align: center;
  display: flex;
  align-items: center;
  height: 53px;
  width: 100%;
  padding: 0 10px;
  // justify-content: center;
  padding-top: 15px;
  border-bottom: var(--theme-border);

  a {
    font-size: 14px;
    color: var(--theme-text);
    opacity: 0.5;
    display: flex;
    align-items: center;
    padding: 0 12px 20px 12px;
    text-align: center;
    position: relative;
    transition: 0.3s;
    &:hover {
      opacity: 0.8;
    }
  }
  a.active {
    opacity: 1;
    &::after {
      content: '';
      display: block;
      width: 100%;
      height: 2px;
      background: var(--theme-main);
      bottom: 2px;
      left: 0;
      position: absolute;
    }
  }
}
